import React, { useState } from "react";
import { Contact, Scan } from "@react-vant/icons";
import { Popup, Button, Input, Form, Picker, Toast } from "react-vant";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "../utils/request";
type Props = {};

const EditContacts = (props: Props) => {
  const navigate = useNavigate();
  const location = useLocation();

  const [obj, setObj] = useState(location.state);
  //获取本地username
  const username = localStorage.getItem("username");
  //返回上一页
  const btn = () => {
    navigate("/contacts");
  };
  //切换账号
  const [showCloseIcon, setShowCloseIcon] = useState(false);
  const switchUser = () => {
    setShowCloseIcon(true);
  };
  //退出登录
  const exit = () => {
    navigate("/login");
    localStorage.removeItem("token");
    localStorage.removeItem("username");
  };
  const [form] = Form.useForm();
  form.setFieldsValue(obj);
  const onFinish = (values: any) => {
    // console.log(values.status);
    if (!values.status) {
      values.status = "成人票";
    }
    if (!values.id_status) {
      values.id_status = "身份证";
    }
    values.flag = false;
    (async () => {
      let res = await axios.post(`/editpassenger/${obj.id}`, values);
      if (res.data.msg === 200) {
        Toast.success("编辑成功");
        navigate("/contacts");
      }
    })();
    console.log(values);
  };
  return (
    <div className="addcontacts">
      <header>
        <div className="box1">
          <span onClick={btn} style={{ fontSize: "24px" }}>
            {"<"}
          </span>
          <span>编辑列表</span>
          <span></span>
        </div>
        <div className="box2">
          <div className="top">
            <Contact fontSize={"20px"} />
          </div>
          <span>{username}</span>
          <div onClick={switchUser} style={{ color: "#fff", fontSize: "12px" }}>
            切换账号&emsp;{">"}
          </div>
        </div>
      </header>
      <Popup
        visible={showCloseIcon}
        style={{ height: "30%" }}
        position="bottom"
        onClose={() => setShowCloseIcon(false)}
      >
        <div style={{ width: "100%", height: "30px" }}> </div>

        <Button round type="info" size="large">
          切换账号
        </Button>
        <div style={{ width: "100%", height: "30px" }}> </div>
        <Button onClick={exit} round type="primary" size="large">
          退出登录
        </Button>
      </Popup>
      <main>
        <div style={{ width: "100%", height: "20px" }}></div>

        <Button round size="large" type="default">
          <span
            style={{
              color: "rgb(0, 172, 189)",
              display: "flex",
              alignItems: "center",
            }}
          >
            <Scan />
            &nbsp; 扫描证件添加
          </span>
        </Button>
        <div className="box">
          <Form
            form={form}
            onFinish={onFinish}
            footer={
              <div style={{ margin: "16px 16px 0" }}>
                <Button
                  className="btn"
                  color="rgb(0, 172, 189)"
                  round
                  size="large"
                  nativeType="submit"
                  type="primary"
                  block
                >
                  确定
                </Button>
              </div>
            }
          >
            <Form.Item
              className="diyi"
              isLink
              name="status"
              label="乘客类型"
              trigger="onConfirm"
              onClick={(_, action: any) => {
                action.current?.open();
              }}
            >
              <Picker popup columns={["成人票", "儿童票"]}>
                {(val) => val || "成人票"}
              </Picker>
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写姓名" }]}
              name="name"
              label="姓名"
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              className="disan"
              isLink
              name="id_status"
              label="证件类型"
              trigger="onConfirm"
              onClick={(_, action: any) => {
                action.current?.open();
              }}
            >
              <Picker popup columns={["身份证", "户口本"]}>
                {(val) => val || "身份证"}
              </Picker>
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写证件号码" }]}
              name="id_number"
              label="证件号码"
            >
              <Input placeholder="与乘客证件号码一致" />
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写手机号码" }]}
              name="tel"
              label="手机号码"
            >
              <Input placeholder="请准确填写手机号" />
            </Form.Item>
          </Form>
          <div className="text">
            为配合疫情防疫工作,需提供每名乘客的<span>本人手机号</span>
            ,老人或无手机号的乘客,可填写亲友手机号
          </div>
        </div>
        <div className="box2">本次购票服务由八维服务提供</div>
      </main>
    </div>
  );
};

export default EditContacts;
